import * as Cesium from 'cesium'
import {getCompanyPresentationDetails, getVideoMonitoring, getWeatherMonitoringSearch} from "@/api/threeJs/threeJsApi";
import hlsPlay from "@/utils/hlsPlay";
import publicResourcesData from "@/pointsDatas/publicResourcesData.json";

function addClickCesium(cesiumViewer) {
    // 点击事件
    //点击地图事件
    const handler = new Cesium.ScreenSpaceEventHandler(
        cesiumViewer.scene.canvas,
    );

    handler.setInputAction((click) => {
        // 屏幕坐标转世界坐标——关键点
        const ellipsoid = cesiumViewer.scene.globe.ellipsoid; //笛卡尔坐标
        const cartesian = cesiumViewer.camera.pickEllipsoid(
            click.position,
            ellipsoid,
        );
        const pick = cesiumViewer.scene.pick(click.position);
        if (pick && pick.id) {
            // 笛卡尔转经纬度
            const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
            const longitude = Cesium.Math.toDegrees(cartographic.longitude);
            const latitude = Cesium.Math.toDegrees(cartographic.latitude);
            let cart3 = Cesium.Cartesian3.fromDegrees(longitude, latitude, 0);
            if (pick.id.name === 'carRed') {
                // getVehiclePositionLoginMds().then(res => {
                //     console.log(res)
                //     window.open("https://18gps.net/dealer/?mds=" + res.mds);
                // })
                // 点击了小车
                // document.getElementById('monitoringPage').style.display = 'none'
                // document.getElementById('companiesPage').style.display = 'none'
                // document.getElementById('weatherSearchPage').style.display = 'none'
                // let el = document.getElementById("carPosPage");
                // el.style.display = 'block'
                // cesiumViewer.movePositionEventListener = () => {
                //     let screen = Cesium.SceneTransforms.worldToWindowCoordinates(
                //         cesiumViewer.scene,
                //         cart3,
                //     );
                //     el.style.top = screen.y + "px";
                //     el.style.left = screen.x + "px";
                // };
                // cesiumViewer.scene.postRender.addEventListener(
                //     cesiumViewer.movePositionEventListener,
                // );
            } else if (pick.id.name === '监控图标') {
                // 点击了监控
                document.getElementById('carPosPage').style.display = 'none'
                document.getElementById('companiesPage').style.display = 'none'
                document.getElementById('weatherSearchPage').style.display = 'none'
                let el = document.getElementById("monitoringPage");
                el.style.display = 'block'
                let video = document.createElement("video");
                video.muted = true;
                video.style.width = '100%';
                video.style.display = 'block';
                video.play();
                let videoBox = el.querySelector('.monitoring')
                videoBox.innerHTML = `${pick.id.id}`
                videoBox.appendChild(video);
                console.log(pick.id.cameraIndexCode)
                getVideoMonitoring({"cameraIndexCode": pick.id.cameraIndexCode}).then(res => {
                    hlsPlay(video, res.data.url)
                })
                cesiumViewer.movePositionEventListener = () => {
                    let screen = Cesium.SceneTransforms.worldToWindowCoordinates(
                        cesiumViewer.scene,
                        cart3,
                    );
                    el.style.top = screen.y + "px";
                    el.style.left = screen.x + "px";
                };
                cesiumViewer.scene.postRender.addEventListener(
                    cesiumViewer.movePositionEventListener,
                );
            } else if (pick.id.name === '企业名称') {
                // 点击了企业
                document.getElementById('carPosPage').style.display = 'none'
                document.getElementById('monitoringPage').style.display = 'none'
                document.getElementById('weatherSearchPage').style.display = 'none'
                let el = document.getElementById("companiesPage");
                el.style.display = 'block'
                let dom = el.querySelector('.companiesTags')
                dom.innerHTML = '请等候...'
                getCompanyPresentationDetails(pick.id.infoId).then(res => {
                    const data = res.data
                    console.log(data)
                    dom.innerHTML = `
                        <div class="flex">
                            <div>
                                  <div>企业名称:</div>
                                  <div>行业类型:</div>
                                  <div>企业状态:</div>
                                  <div>企业负责人姓名:</div>
                                  <div>企业负责人联系电话:</div>
                                  <div>企业联系人姓名:</div>
                                  <div>企业联系人移动电话:</div>
                                  <div>企业简介:</div>
                            </div>
                            <div>
                                <div class="ml-[10px]">${data.enterpriseName}</div>
                                <div class="ml-[10px]">${data.industryTypeMajor}-${data.industryTypeSub}</div>
                                <div class="ml-[10px]">${data.enterpriseStatus}</div>
                                <div class="ml-[10px]">${data.legalRepresentative}</div>
                                <div class="ml-[10px]">${data.legalPhone}</div>
                                <div class="ml-[10px]">${data.contactPerson}</div>
                                <div class="ml-[10px]">${data.contactPhone}</div>
                                <div class="ml-[10px] max-w-[13vw]">${data.companyPresentation}</div>
                            </div>
                        </div>
                    `
                })
                cesiumViewer.movePositionEventListener = () => {
                    let screen = Cesium.SceneTransforms.worldToWindowCoordinates(
                        cesiumViewer.scene,
                        cart3,
                    );
                    el.style.top = screen.y + "px";
                    el.style.left = screen.x + "px";
                };
                cesiumViewer.scene.postRender.addEventListener(
                    cesiumViewer.movePositionEventListener,
                );
            } else if (pick.id.name === '空气检测图标') {
                document.getElementById('carPosPage').style.display = 'none'
                document.getElementById('monitoringPage').style.display = 'none'
                document.getElementById('companiesPage').style.display = 'none'
                let el = document.getElementById("weatherSearchPage");
                el.style.display = 'block'
                let conBox = el.querySelector('.weatherSearch')
                conBox.innerHTML = '请等候...'
                getWeatherMonitoringSearch({serialNumber: pick.id.serialNumber}).then(res => {
                    conBox.innerHTML = `设备编号:${res.data.serialNumber}`
                    res.data.list.forEach((item, index) => {
                        conBox.innerHTML += `
                        <div class="item ml-[15px]" >
                          <span class="ml-[15px]">${item.deviceType}</span>:<span style="margin-left: 20px;margin-right: 5px" >${item.value}</span><span>${item.deviceTypeUnit}</span>
                        </div>`
                    })
                })
                cesiumViewer.movePositionEventListener = () => {
                    let screen = Cesium.SceneTransforms.worldToWindowCoordinates(
                        cesiumViewer.scene,
                        cart3,
                    );
                    el.style.top = screen.y + "px";
                    el.style.left = screen.x + "px";
                };
                cesiumViewer.scene.postRender.addEventListener(
                    cesiumViewer.movePositionEventListener,
                );
            } else if (pick.id.name === '公共资源图标') {
                document.getElementById('carPosPage').style.display = 'none'
                document.getElementById('monitoringPage').style.display = 'none'
                document.getElementById('companiesPage').style.display = 'none'
                let el = document.getElementById("weatherSearchPage");
                el.style.display = 'block'
                let conBox = el.querySelector('.weatherSearch')
                conBox.innerHTML = '请等候...'
                publicResourcesData.forEach((item, index) => {
                    if (item.id === pick.id.infoId) {
                        conBox.innerHTML = `
                        <div class="flex">
                            <div>
                                  <div class="mt-[5px]">污水厂名称:</div>
                                  <div class="mt-[5px]">联系人:</div>
                                  <div class="mt-[5px]">联系电话:</div>
                                  <div class="mt-[5px]">日污水处理能力:</div>
                            </div>
                            <div>
                                <div class="ml-[15px] mt-[5px]">${item.resourcesName}</div>
                                <div class="ml-[15px] mt-[5px]">${item.contact}</div>
                                <div class="ml-[15px] mt-[5px]">${item.contactNumber}</div>
                                <div class="ml-[15px] mt-[5px]">${item.ability}吨(T)</div>

                            </div>
                        </div>
                    `
                    }
                })
                cesiumViewer.movePositionEventListener = () => {
                    let screen = Cesium.SceneTransforms.worldToWindowCoordinates(
                        cesiumViewer.scene,
                        cart3,
                    );
                    el.style.top = screen.y + "px";
                    el.style.left = screen.x + "px";
                };
                cesiumViewer.scene.postRender.addEventListener(
                    cesiumViewer.movePositionEventListener,
                );
            }
        }
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
}


// 监听视角经纬度高度
function cameraPos() {
    this.viewer.camera.changed.addEventListener(() => {
        // 当前高度
        let height = this.viewer.camera.positionCartographic.height;
        if (height > 15000) {
            const pop = document.getElementById("popup");
            pop.style.display = "none"; // 隐藏弹出层
        }
    });
}

export {addClickCesium}
